<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script th:src="@{/layui/layui.js}" type="text/javascript"></script>
    <link th:href="@{/layui/css/layui.css}" rel="stylesheet" />
</head>
<body>
<div class="layui-panel" style="padding: 8px;">
    <fieldset class="layui-elem-field  layui-border-blue">
        <legend>搜索区域</legend>
        <form class="layui-form layui-form-pane" style="margin: 20px;">
            <div class="layui-form-item">
                <div class="layui-inline">

                    <div class="layui-input-inline">
                        <input class="layui-input" type="text" name="id" autocomplete="off" placeholder="请输入用户id" />
                    </div>

                    <div class="layui-input-inline">
                        <input class="layui-input" type="text" name="username" autocomplete="off" placeholder="请输入用户名" />
                    </div>

                    <div class="layui-input-inline">
                        <input class="layui-input" type="text" name="phone" autocomplete="off" placeholder="请输入手机" />
                    </div>
                </div>
                <div class="layui-inline">
                    <a class="layui-btn layui-btn-normal" lay-submit="" lay-filter="searchBtn">
                        <i class="layui-icon layui-icon-search"></i>
                        查找
                    </a>
                    <a class="layui-btn layui-btn-normal" lay-submit="" lay-filter="">
                        <i class="layui-icon layui-icon-down"></i>
                        导出
                    </a>
                </div>
            </div>
        </form>
    </fieldset>
    <div >
        <table id="membersTable" lay-filter="membersTable" class="layui-table layui-form"></table>
    </div>

    <script id="tableBar" type="text/html">
        <a class="layui-btn layui-btn-normal layui-btn-md" lay-event="add">
            <i class="layui-icon layui-icon-add-1"></i>
            新增
        </a>
        <!--<a class="layui-btn layui-btn-danger layui-btn-md" lay-event="delete">
            <i class="layui-icon layui-icon-delete"></i>
            删除
        </a>-->
    </script>

    <script id="tool" type="text/html">
        <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">详情</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
    </script>

    <script id="photo" type="text/html">
        <img src="/file/fc/showImg/{{d.userPhoto}}" style="width: 30px;height: 60px;">
    </script>
<!--    <script id="swichStatus" type="text/html">-->
<!--        <input type="checkbox" name="status" value="{{d.status}}" lay-text="可用|禁用"-->
<!--               lay-skin="switch" lay-filter="checkbox"{{d.status==1?"":"checked"}} />-->
<!--    </script>-->
<!--    <script id="swichSex" type="text/html">-->
<!--        <input type="checkbox" name="sex" value="{{d.sex}}" lay-text="男|女"-->
<!--               lay-skin="switch" lay-filter="checkbox"{{d.sex==1?"":"checked"}} />-->
<!--    </script>-->
<!--    <script id="swichLevel" type="text/html">-->
<!--        <input type="checkbox" name="level" value="{{d.level}}" lay-text="高级会员|普通用户"-->
<!--               lay-skin="switch" lay-filter="checkbox"{{d.level==1?"":"checked"}} />-->
<!--    </script>-->
</div>

<script>
    var $;
    layui.use(['table','form','jquery','layer'],function(){
        var table = layui.table,form = layui.form,layer=layui.layer;$=layui.jquery;


        //加载表格
        table.render({
            elem:'#membersTable',
            height:'full-160',
            toolbar:'#tableBar',
            page: {
                theme:'#1e9fff'
            },
            url:"/members/mcs/find",
            cols:[
                [
                {field:'id',title:'用户id',width:100,align:'center'},
                    {field:'username',title:'用户名',width:200,align:'center'},
                    {field:'user',title:'用户昵称',width:200,align:'center'},
                {field:'userPhoto',title:'用户头像',width:200,templet: '#photo',align:'center'},
                {field:'phone',title:'手机号码',width:150,align:'center'},
                {field:'sex',title:'性别',width:100,align:'center',
                    templet:function (res) {
                        if("1" == res.sex){return "<span style='background-color: #e8f4ff;border-color:#d1e9ff;color: #1890ff;border-radius:5px;padding: 2px 10px;display:inline-block'>男</span>"}
                        else if("2" == res.sex){return "<span style='background-color: #e8f4ff;border-color:#d1e9ff;color: #1890ff;border-radius:5px;padding: 2px 10px;display:inline-block'>女</span>"}
                        else if("3" == res.sex){return "<span style='background-color: #e8f4ff;border-color:#d1e9ff;color: #1890ff;border-radius:5px;padding: 2px 10px;display:inline-block'>未知</span>"};
                    }},
                {field:'level',title:'用户等级',align:'center',
                    templet:function (res) {
                        if("1" == res.level){return "<span style='background-color: #e8f4ff;border-color:#d1e9ff;color: #1890ff;border-radius:5px;padding: 2px 5px;display:inline-block'>普通用户</span>"}
                        else if("2" == res.level){return "<span style='background-color: #e8f4ff;border-color:#d1e9ff;color: #1890ff;border-radius:5px;padding: 2px 5px;display:inline-block'>会员用户</span>"}
                        else if("3" == res.level){return "<span style='background-color: #e8f4ff;border-color:#d1e9ff;color: #1890ff;border-radius:5px;padding: 2px 5px;display:inline-block'>高级会员用户</span>"};
                    }
                },
                {field:'status',title:'状态',align:'center',
                    templet:function (res) {
                        if("1" == res.status){return "<span style='background-color: #e8f4ff;border-color:#d1e9ff;color: #1890ff;border-radius:5px;padding: 2px 5px;display:inline-block'>可用</span>"}
                        else if("2" == res.status){return "<span style='background-color: #e8f4ff;border-color:#d1e9ff;color: #1890ff;border-radius:5px;padding: 2px 5px;display:inline-block'>禁用</span>"}
                        else if("3" == res.status){return "<span style='background-color: #e8f4ff;border-color:#d1e9ff;color: #1890ff;border-radius:5px;padding: 2px 5px;display:inline-block'>注销</span>"};
                    }},
                {fixed:'right',title:'操作',width:200,align:'center',toolbar:'#tool'}
            ]
            ],
        })

        //监听搜索按钮
        form.on('submit(searchBtn)',function(data){
            var dataForm = data.field;
            table.reload('membersTable',{
                where:{
                    username:dataForm.username,
                    phone:dataForm.phone,
                    id:dataForm.id,
                },

            })

        })

        var active = {
            addOrUpdate:function (content){
                var b = false;
                top.layer.open({
                    type:2,
                    content:content,
                    area:['700px','800px'],
                    btn:['确定保存','取消关闭'],
                    btn1:function (i,o){
                        b = true;
                        o.find('iframe')[0].contentWindow.btnSubmit();
                    },
                    end:function (){
                        if (b) layui.table.reload('membersTable');
                    }
                })
            },
            deleteConfirm:function (id) {
                        $.ajax({
                            type:'post',
                            url:'/members/mcs/delete',
                            dataType: 'json',
                            data:{
                                id:id,
                            },
                            success:function (result) {
                                var tip = result.msg;
                                layer.msg(tip);
                                if(result.is){
                                    layui.table.reload('membersTable');
                                }
                            }
                        })
            }


        }

        table.on('tool(membersTable)',function (obj){
            var event = obj.event;
            if("edit" == event){
                active.addOrUpdate('/page/members/membersEdit/'+obj.data.id);

            }else if ("delete == event"){
                active.deleteConfirm(obj.data.id);
            }
        })
        table.on('toolbar(membersTable)',function (obj) {
            var event = obj.event;
            if("add" == event){
                active.addOrUpdate('/page/members/membersAdd');
            }
        })
    });
</script>
</body>
</html>